<template>
  <div>
    <el-dialog title="工单详情" :visible="detaill" :before-close="close">
      <div v-if="row.taskStatusTypeEntity">
        <el-alert
          :title="row.taskStatusTypeEntity.statusName"
          type="info"
          show-icon
        />
      </div>
      <div ref="form" class="info">
        <div class="left">
          <div class="l">设备编号: {{ row.innerCode }}</div>
          <div class="l">取消日期: </div>
          <div v-if="row.taskType" class="l">工单类型: {{ row.taskType.typeName }}</div>
          <div class="l">工单方式: {{ row.method }}</div>
        </div>
        <div class="right">
          <div class="r">创建日期： {{ row.createTime }}</div>
          <div class="r">运营人员： {{ row.userName }}</div>
          <div class="r">补货数量：<el-link>补货详情</el-link></div>
          <div class="r">取消原因： </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="edit(row)">重新创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HrsaasDetail',
  props: {
    detaill: {
      type: Boolean,
      default: true
    },
    row: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
    }
  },

  mounted() {

  },

  methods: {
    close() {
      this.$emit('update:detaill', false)
    },
    edit(row) {
      this.$emit('edit', row)
    }
  }
}
</script>

<style lang="scss" scoped>
  .info{
    display: flex;
    margin-top: 30px;
    .left{
      margin-left: 30px;
      .l{
    padding-top: 15px;
      }
    }
    .right{
      margin-left: 280px;
      padding: 15px;
      .r{
    padding-top: 15px;
    .el-link{
      color:#4368e1
    }
      }
    }
  }
</style>
